<template>
  <div class="shop">

    <el-button type="primary" size="mini" @click="isOwnSetting = true">自定义设置</el-button>
    <el-table :data="tableData"
      style="width:100%;margin:20px 0;"
      max-height="720"
      
      :header-cell-style="tccolor"
      border>

    <el-table-column label="乡镇/街道"  width="120">
      <template slot-scope="scope">
        <p style="text-align:center">{{scope.row.name}}</p>
      </template>
    </el-table-column>
    <el-table-column label="社区">
      <template slot-scope="scope">
        <div v-for='(item,index) in scope.row.children_list' :key="'p'+index" style='float:left;margin-right:12px;margin-bottom:12px;'>
          <el-button size="mini" type="primary" @click="goToAreaSettingDetail(scope.row.children_list[index].id)" v-if="scope.row.children_list[index].is_served == 1">{{scope.row.children_list[index].name}}</el-button>
        <el-button size="mini" type="danager" @click="goToAreaSettingDetail(scope.row.children_list[index].id)" v-if="scope.row.children_list[index].is_served == 0">{{scope.row.children_list[index].name}}</el-button>
        </div>
      </template>
    </el-table-column>
    </el-table>


    <jdialog title="自定义设置" :visible.sync="isOwnSetting" width="720px">
       
    <div class="shop">
      <span class="star">*</span><span>选择区域</span>
      <br/>
    <el-select style="width:140px;margin-top:12px;"
          size='small'
          v-model="province_id"
          filterable
          @change="onChangeProvince"
          class="select"
          placeholder="省份">
          <el-option v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>

    <el-select style="width:140px;margin-top:12px;margin-left:12px;"
          size='small'
          v-model="city_id"
          filterable
          @change="onChangeCity"
          class="select"
          placeholder="市">
     <el-option v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>
    <el-select style="width:140px;margin-top:12px;margin-left:12px;"
          size='small'
          v-model="area_id"
          @change="onChangeDown"
          filterable
          class="select"
          placeholder="区/县">

    <el-option v-for="item in townAreaList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>

     <el-select style="width:140px;margin-top:12px;margin-left:12px;"
          size='small'
          v-model="town_id"
          filterable
          class="select"
          @change="onChangeStreet"
          placeholder="乡镇/街道">

    <el-option v-for="item in streetList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
    </el-select>

    <el-table :data="townAreaStreetList"
      style="width:100%;margin:20px 0;"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="社区名称(原名称)" prop="name"></el-table-column>
    <el-table-column label="自定义名称">
      <template slot-scope="scope">
        <el-input size="mini" style="width:140px;" v-model="scope.row.nickname"></el-input>
      </template>
    </el-table-column>
    </el-table>

     <div style="text-align:center;">
       <el-button size="mini" type='danager' @click="isOwnSetting = false">取消</el-button>
       <el-button size="mini" type="primary" @click="certainSettingService">确定</el-button>
     </div>
    </div>
    </jdialog>
  </div>
</template>


<script>
import {providerRegionVillageList,
       batchUpdateRegionNickname,
       commonChilderRegionList} from '@/api/service'
export default {
  data(){
    return{
       
       province_id:'',
       city_id:'',
       area_id:'',
       town_id:'',
       tableData:[],
       isOwnSetting:false,
      
       provinceList:[],
       cityList:[],
       townAreaList:[],
       streetList:[],
       townAreaStreetList:[]
    }
  },
  mounted(){
    this.area_id = Number(this.$route.query.area_id)
    this.province_id = Number(this.$route.query.province_id)
    this.city_id  = Number(this.$route.query.city_id)

    if(this.area_id && this.province_id &&this.city_id){
      this.getproviderRegionVillageList()
      this.getcommonChilderRegionList(1,0)
    this.getcommonChilderRegionList(2,this.province_id)
    this.getcommonChilderRegionList(3,this.city_id)
    this.getcommonChilderRegionList(4,this.area_id)
    }
    
  },
  methods:{
   
   
   //跳转服务商列表详情
   goToAreaSettingDetail(id){
      console.log(id)
    
    },
   //切换省市
   onChangeProvince(e){
   
      this.city_id  = this.area_id  = this.town_id = ''
     this.getcommonChilderRegionList(2,e)
   },
   onChangeCity(e){
     this.area_id= this.town_id = '' 
     this.getcommonChilderRegionList(3,e)
   },
   //切换区
   onChangeDown(e){
     this.town_id = ''
     this.getcommonChilderRegionList(4,e)
   },
   //切换街道
   onChangeStreet(e){
    this.getcommonChilderRegionList(5,e)
   },

   //确定设置自定义名称
   certainSettingService(){
    this.getbatchUpdateRegionNicknameData()
   },
   async getproviderRegionVillageList(){
     var url = 'area_id='+this.area_id
     let res = await providerRegionVillageList(url)
     if(res.code === 10000){
       this.tableData =  res.data
     }else{
       this.$message.error(res.message)
     }
   },
   
  //获取下级地区列表
  async  getcommonChilderRegionList(type,id){
    var url = 'parent_id='+id;
    let res = await commonChilderRegionList(url)
   if(type == 1){
      this.provinceList = res.data
   }
   if(type == 2){
      this.cityList = res.data
   }
   if(type == 3){
      
      this.townAreaList = res.data
   }
   if(type == 4){
     this.streetList = res.data
   }else if(type == 5){
     this.townAreaStreetList = res.data
   }
    
  },

  //修改昵称
  async getbatchUpdateRegionNicknameData(){
    if(this.townAreaStreetList.length > 0){
      var arr = []
   
      this.townAreaStreetList.map(item => {
         if(item.nickname.length > 0){
          
           arr.push({id:item.id,nickname:item.nickname})
          
         }
      })

      // var url  = 'village_list=' + JSON.stringify(arr)
      let res   = await batchUpdateRegionNickname({village_list:JSON.stringify(arr)})
    if(res.code === 10000){
      this.$message.success(res.message)
      // this.getproviderRegionVillageList()
      this.isOwnSetting = false
    }else{
      this.$message.error(res.message)
    }
    }else{
      this.isOwnSetting = false
    }
    
  },
   tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center; font-size:14px;";
    },
  }
}
</script>


<style lang="scss" scoped>
.shop{
  padding: 20px;
  span{
    font-size: 12px;

  }
  .star{
    color: #f4222d;
  }
}
</style>